<template>
     <el-row :gutter='12' style="margin:0px 25px " justify="center" class="row-con">
    <el-col
      v-for="(Recommenditem, index) in Recommend"
      :key="o"
      :span="6"
    >
      <el-card :body-style="{ padding: '0px' }" >
        <img
          :src="Recommenditem.cover[0]"
          class="image"
        />
        <div style="padding: 14px">
			<!-- <span ><img src="https://rs.dance365.com/title_course.svg" class="wc" alt="" style=""></span> -->
          <span class="my-content">{{Recommenditem.momentClassificationBackup.workTitle}}</span>
          <div class="bottom">
            <!-- <time class="time">{{ currentDate }}</time> -->
         <div>
            {{Recommenditem.initExposureNum}}人浏览
		</div>
          <div class="iconInfo">		
							<span>
								<svg
									t="1666082225027"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="4368"
									width="20"
									height="20"
								>
									<path
										d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
										p-id="4369"
										fill="#b1b5c1"
									></path>
								</svg>
								4
							</span>
							<span>
								<svg
									t="1666082073268"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="3122"
									width="20"
									height="20"
								>
									<path
										d="M486.4 682.666667c4.266667 0 4.266667 0 0 0H725.333333c46.933333 0 85.333333-38.4 85.333334-85.333334V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333H298.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v256c0 46.933333 38.4 85.333333 85.333334 85.333334h21.333333c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333H298.666667c-72.533333 0-128-55.466667-128-128V341.333333c0-72.533333 55.466667-128 128-128h426.666666c72.533333 0 128 55.466667 128 128v256c0 72.533333-55.466667 128-128 128h-230.4l-166.4 81.066667c-8.533333 4.266667-21.333333 0-29.866666-8.533333-4.266667-8.533333 0-21.333333 8.533333-29.866667l170.666667-85.333333h8.533333z"
										p-id="3123"
										fill="#b1b5c1"
									></path>
									<path
										d="M341.333333 469.333333m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
										p-id="3124"
										fill="#b1b5c1"
									></path>
									<path
										d="M512 469.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"
										p-id="3125"
										fill="#b1b5c1"
									></path>
									<path
										d="M682.666667 469.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
										p-id="3126"
										fill="#b1b5c1"
									></path>
								</svg>
								7
							</span>
							<span>
								<svg
									t="1666082291857"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="5392"
									width="20"
									height="20"
								>
									<path
										d="M576.4 203.3c46.7 90.9 118.6 145.5 215.7 163.9 97.1 18.4 111.5 64.9 43.3 139.5s-95.6 162.9-82.3 265.2c13.2 102.3-24.6 131-113.4 86.2s-177.7-44.8-266.6 0-126.6 16-113.4-86.2c13.2-102.3-14.2-190.7-82.4-265.2-68.2-74.6-53.7-121.1 43.3-139.5 97.1-18.4 169-73 215.7-163.9 46.6-90.9 93.4-90.9 140.1 0z"
										p-id="5393"
										fill="#b1b5c1"
									></path>
								</svg>
								11
							</span>
						</div>
           
          </div>
		  <div class="card-bottom-don">
                                <div class="botton-text">
                                     <img class="userAva" :src="Recommenditem.creatorBackup.avatar" alt="">
                                     <span>{{Recommenditem.creatorBackup.name}}</span>
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
                                     <img src="" alt="">
									 <div class="date">09-21</div>
									 
                                </div>
                               
        	</div>
		
        </div>
      </el-card>
    </el-col>
  	</el-row>
</template>

<script setup>
// import useBannerStore from '../../'
// const bannerStore = useBannerStore();
// let Recommend = ref<any>({});
// import{ref,onMounted} from 'vue'
// onMounted(()=>{
//   Recommend = bannerStore.$store.Recommend
//   console.log(Recommend)
// })
import useBannerStore from '../../store/home.ts'
const bannerStore = useBannerStore();
import{ref,onMounted} from 'vue'
let Recommend =ref({});
onMounted(()=>{})
// console.log(bannerStore.$state.Recommend)

Recommend =bannerStore.$state.Recommend
// watch:{
// 	()=>Recommend
	
// }
</script>

<style lang="scss" scoped>
:deep().el-card__body{
width: 100%;
margin:0 auto;
// bug 修改下边框
margin-bottom: 13px;
}
.bottom {

  margin-top: 13px;
  line-height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b1b5c1;
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.button {
  padding: 0;
  height: 130px;
	
}

.image {
  width: 100%;
  height: 150px;
  display: block;
  margin:0 auto
}
.iconInfo{
	

}
.iconInfo span {
	font-size: 12px;
	/* display:inline-block; */
	margin-right: 6px;
}
.iconInfo span svg {
	vertical-align: bottom;
}
.botton-text{
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 6px;
    box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.botton-text .userAva{
    width: 24px;
    height: 24px;
    border-radius: 50%;
	
}
.date{
	
    font-size: 12px;
    color: #b1b5c1;
    padding-right:5px ;
    box-sizing: border-box;
	float: right;
}
.wc{
	height: 24px;
	width: 16px;
}
.my-content{
	/* 超出隐藏 */
	overflow: hidden;
	/* 不换行 */
	white-space: nowrap;
	/* 使用省略号 */
	text-overflow: ellipsis;
}
//  .el-row {
//       margin-bottom: 20px;
//      display:flex;
//    flex-wrap: wrap;
//  }
// .row-con .card {
//   height: 100%;
// }
</style>